<!--
 Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
 for details. All rights reserved. Use of this source code is governed by a
 BSD-style license that can be found in the LICENSE file.
-->
<section>
  <h2>Outlined</h2>
  <div class="mdc-card mdc-card--outlined demo-size">
    <div class="mdc-card__media mdc-card__media--16-9 demo-card__media"></div>
    <div class="demo-card__primary">
      <h2 class="demo-card__title">Our Changing Planet</h2>
      <h3 class="demo-card__subtitle">by Kurt Wagner</h3>
    </div>
    <div class="demo-card__secondary">
      Visit ten places on our planet that are undergoing the biggest changes today.
    </div>
    <div class="mdc-card__actions">
      <div class="mdc-card__action-buttons">
        <material-button>Read</material-button>
        <material-button>Bookmark</material-button>
      </div>
      <div class="mdc-card__action-icons">
        <material-button icon>
          <material-icon icon="favorite_border"></material-icon>
        </material-button>
        <material-button icon>
          <material-icon icon="share"></material-icon>
        </material-button>
        <material-button icon>
          <material-icon icon="more_vert"></material-icon>
        </material-button>
      </div>
    </div>
  </div>
</section>
<section>
  <h2>Elevated</h2>
  <div class="mdc-card demo-size">
    <div class="mdc-card__media mdc-card__media--16-9 demo-card__media"></div>
    <div class="demo-card__primary">
      <h2 class="demo-card__title">Our Changing Planet</h2>
      <h3 class="demo-card__subtitle">by Kurt Wagner</h3>
    </div>
    <div class="demo-card__secondary">
      Visit ten places on our planet that are undergoing the biggest changes today.
    </div>
    <div class="mdc-card__actions">
      <div class="mdc-card__action-buttons">
        <material-button>Read</material-button>
        <material-button>Bookmark</material-button>
      </div>
      <div class="mdc-card__action-icons">
        <material-button icon>
          <material-icon icon="favorite_border"></material-icon>
        </material-button>
        <material-button icon>
          <material-icon icon="share"></material-icon>
        </material-button>
        <material-button icon>
          <material-icon icon="more_vert"></material-icon>
        </material-button>
      </div>
    </div>
  </div>
</section>
